import { Modal, Form, Input, Select, message as _message } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { postUser, editUserList } from '@/apis/user';
const UserModal = ({ modalType, rows, isModalOpen, handleOk, handleCancel, modalRef, userRole }) => {
    const [form] = Form.useForm();
    const roleOptions = userRole.map(item => ({ label: item.roleName, value: item.id }))
    if (modalType == 2) {
        form.setFieldsValue(rows)
    }
    // 自定义提交点击事件
    const handleOks = async () => {
        try {
            const values = await form.validateFields();
            await modalType == 1 ? postUserInfo(values) : editUserInfo(values)
        } catch (error) {
            console.log('error:', error);
        }
    }
    // 新增
    const postUserInfo = async (values) => {
        try {
            const res = await postUser(values)
            let { code, message } = res.data
            if (code == 200) {
                _message.success('添加成功')
                handleOk()
            } else {
                _message.error(`添加失败,${message}`)
            }
        } catch (error) {
            console.log(error);
        }
    }
    // 编辑
    const editUserInfo = async (values) => {
        try {
            const res = await editUserList({ id: rows.id, ...values })
            let { code, message } = res.data
            if (code == 200) {
                _message.success('修改成功')
                handleOk()
                reset()
            } else {
                _message.error(`修改失败,${message}`)
            }
        } catch (error) {
            console.log(error);
        }
    }
    const reset=()=>{
        setTimeout(() => {
            form.resetFields()
        }, 500);
    }
    const cancel = () => {
        handleCancel()
        reset()
    }

    return (
        <Modal maskClosable={false} ref={modalRef} title="Basic Modal" open={isModalOpen} onOk={handleOks} onCancel={cancel}>
            <Form form={form} >
                <Form.Item rules={[{ required: true, message: '请输入账号' }]} name="account">
                    <Input disabled={modalType == 2} allowClear prefix={<UserOutlined className="site-form-item-icon" />} placeholder={`请输入账号`} />
                </Form.Item>
                {modalType == 1 && (
                    <Form.Item rules={[{ required: true, message: '请输入密码!' }]} name="password">
                        <Input type="Password" allowClear prefix={<UserOutlined className="site-form-item-icon" />} placeholder={`请输入密码`} />
                    </Form.Item>
                )}
                <Form.Item rules={[{ required: true, message: '请输入昵称!' }]} name="name">
                    <Input allowClear prefix={<UserOutlined className="site-form-item-icon" />} placeholder={`请输入昵称`} />
                </Form.Item>
                <Form.Item rules={[{ required: true, message: '请输入手机号!' }, { pattern: /^1[0-9]\d{9}$/, message: '请输入正确的手机号' }]} name="phone">
                    <Input allowClear prefix={<UserOutlined className="site-form-item-icon" />} placeholder={`请输入手机号`} />
                </Form.Item>
                <Form.Item name="storeName">
                    <Input allowClear prefix={<UserOutlined className="site-form-item-icon" />} placeholder={`请输入门店信息`} />
                </Form.Item>
                <Form.Item name="roleIdList" rules={[{ required: true, message: '请选择角色' }]}>
                    <Select options={roleOptions} prefix={<UserOutlined className="site-form-item-icon" />} mode="multiple" placeholder="请选择角色">
                        <Select.Option value="demo">Demo</Select.Option>
                    </Select>
                </Form.Item>
            </Form>
        </Modal>
    )
}
export default UserModal